<template>
	<view class="home-school">
		<!-- 自定义导航栏 -->
		<headerNav />
		
		<!-- tab 选项 -->
		<view class="pf-sticky">
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper :current="currentTab"  duration="300" @change="swiperTab" style="height: 100%;">
			<swiper-item v-for="(tabitem,tabindex) in tabTitle" :key="tabitem.id" class="swipers" style="height: 100%;">
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
					<!-- 瀑布流 list列表 -->
					<view class="wrap-list">
						<view class="wrap-list-head u-f">
							<image src="/static/search/temp/ns.jpg"></image>
							<view class="u-f-c u-f-jsb" >
								<text>小时候很美</text>
								<text>3分钟前&nbsp;&nbsp;来自武汉</text>
							</view>
						</view>
						<view class="wrap-cmt-intro">
							武当山处于北亚热带季风气候区，
							具有南北过渡属性，从丹江水库沿岩至天柱峰顶，
							气候的垂直层带明显，兼有丰富多彩的局部小气候，
							大体可分三层气候区。
						</view>
						<view class="cmt-img-list u-f u-f-sbc">
							<image src="/static/search/temp/6.png" mode="widthFix"></image>
							<image src="/static/search/temp/7.png" mode="widthFix"></image>
							<image src="/static/search/temp/8.png" mode="widthFix"></image>
						</view>
						<view class="cmt-list u-f-c">
							<text>用户名很长的时候：风景别致，不错</text>
							<text>用户名：风景别致，不错</text>
							<text>查看10条评论 》</text>
						</view>
						<view class="other-cmt u-f u-f-sbc">
							<view class="u-f u-f-ac">
								<image src="/static/search/temp/ns.jpg"></image>
								<text>添加评论</text>
							</view>
							<view class="sec-txt">
								<text>评论</text>
								<text>99+</text>
							</view>
						</view>
					</view>
					
					<view class="wrap-list">
						<view class="wrap-list-head u-f">
							<image src="/static/search/temp/ns.jpg"></image>
							<view class="u-f-c u-f-jsb" >
								<text>小时候很美</text>
								<text>3分钟前&nbsp;&nbsp;来自武汉</text>
							</view>
						</view>
						<view class="wrap-cmt-intro">
							武当山处于北亚热带季风气候区，
							具有南北过渡属性，从丹江水库沿岩至天柱峰顶，
							气候的垂直层带明显，兼有丰富多彩的局部小气候，
							大体可分三层气候区。
						</view>
						<view class="cmt-img-list u-f u-f-sbc">
							<image src="/static/search/temp/4.png" mode="widthFix"></image>
						</view>
						<view class="cmt-list u-f-c">
							<text>用户名很长的时候：风景别致，不错</text>
							<text>用户名：风景别致，不错</text>
							<text>查看10条评论 》</text>
						</view>
						<view class="other-cmt u-f u-f-sbc">
							<view class="u-f u-f-ac">
								<image src="/static/search/temp/ns.jpg"></image>
								<text>添加评论</text>
							</view>
							<view class="sec-txt">
								<text>评论</text>
								<text>99+</text>
							</view>
						</view>
					</view>
									
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/common/components/tabs/navTab.vue';
	import headerNav from '@/common/components/headerNav/headerNav.vue';
	export default {
		data() {
			return {
				// tab 导航相关
				tabTitle: ['热门', '最新互动','其它','风景','分类名称'], //导航栏格式
				currentTab:0,	//sweiper所在页
				
			}
		},
		components: {
			navTab,headerNav
		},
		methods: {
			//点击切换
			changeTab(index) {
				this.currentTab = index
			},
			//swiper 切换
			swiperTab(e) {
				this.currentTab = e.target.current;
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(this.currentTab)
				} else {
					this.$refs.navTab.longClick(this.currentTab)
				}
			}
			
		}
	}
</script>

<style lang="scss">
@import './homeSchool.scss';
page {
	height: 100%;
	width: 100%;
	background-color: #f6f6f6;
}
</style>
